<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.1)
        }

        canvas {
            display: block;
            margin: 200px auto;
        }
    </style>
</head>

<body>
    <canvas id="solar" width="300" height="300"></canvas>
    <script>
        init();

        function init() {
            let canvas = document.querySelector("#solar");
            let ctx = canvas.getContext("2d");
            draw(ctx);
        }

        function draw(ctx) {
            requestAnimationFrame(function step() {
                drawDial(ctx); //绘制表盘
                drawAllHands(ctx); //绘制时分秒针
                requestAnimationFrame(step);
            });
        }
        /*绘制时分秒针*/
        function drawAllHands(ctx) {
            let time = new Date();

            let s = time.getSeconds();
            let m = time.getMinutes();
            let h = time.getHours();

            let pi = Math.PI;
            let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度
            let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
            let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度

            drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针
            drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针
            drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
        }
        /*绘制时针、或分针、或秒针
         * 参数1：要绘制的针的角度
         * 参数2：要绘制的针的长度
         * 参数3：要绘制的针的宽度
         * 参数4：要绘制的针的颜色
         * 参数4：ctx
         * */
        function drawHand(angle, len, width, color, ctx) {
            ctx.save();
            ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
            ctx.rotate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度
            ctx.beginPath();
            ctx.moveTo(-4, 0);
            ctx.lineTo(len, 0);  // 沿着x轴绘制针
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }

        /*绘制表盘*/
        function drawDial(ctx) {
            let pi = Math.PI;

            ctx.clearRect(0, 0, 300, 300); //清除所有内容
            ctx.save();

            ctx.translate(150, 150); //一定坐标原点到原来的中心
            ctx.beginPath();
            ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
            ctx.stroke();
            ctx.closePath();

            for (let i = 0; i < 60; i++) {//绘制刻度。
                ctx.save();
                ctx.rotate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起
                ctx.beginPath();
                ctx.moveTo(110, 0);
                ctx.lineTo(140, 0);
                ctx.lineWidth = i % 5 ? 2 : 4;
                ctx.strokeStyle = i % 5 ? "blue" : "red";
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
            ctx.restore();
        }
    </script>
</body>

</html>